.image-gallery {
    display:       block;
    position:      relative;
    height:        auto;
    overflow:      hidden;
    margin-bottom: 30px;

    .image-gallery-metabar {
        position:    absolute;
        bottom:      0;
        // width: (full with) - ((padding right-left of `.image-gallery-metabar` + 0.05em) * 4) to be responsive on all screen
        width:       calc(100% - (1.5em) * 2);
        font-family: map-get($font-families, 'image-gallery');
        font-style:  italic;
        background:  rgba(0, 0, 0, 0.75);
        font-size:   map-get($font-size, small);
        color:       white;
        padding:     0.5em 1.5em;
        // Use to go over all images of the gallery
        z-index:     1;
    }
    .image-gallery-photos {
        .photo-box {
            float:    left;
            position: relative;
            overflow: hidden;
            display:  none;

            &:first-child {
                display:        block;
                width:          100%;
                // 16:9 ratio, consider as height value
                padding-bottom: 56.25%;
            }
            .photo-box-inner {
                position: absolute;
                overflow: hidden;

                .photo {
                    width:  100%;
                    cursor: -webkit-zoom-in;
                    cursor: -moz-zoom-in;
                }
            }
        }
    }
    // Thumbnail image of gallery
    // Used when image gallery contains more than 2 images
    // You can change the style of image gallery by changing the following value
    // Currently, it display one large image above 2 smaller images
    // First image of the gallery
    .image-gallery-photos--thumbnail {
        // Display all images
        .photo-box {
            display:        block;
            width:          50%;
            // Consider as height value
            padding-bottom: 30%;
            // Display First image in large
            &:first-child {
                width:          100%;
                // Consider as height value
                padding-bottom: 40%;
                margin-bottom:  $image-gallery-photos-margin;
            }
            // Resize seconde image minus space between 2 images
            &:nth-child(2) {
                margin-right: $image-gallery-photos-margin;
                // width: 50% minus the space between 2 images
                width:        calc(50% - #{$image-gallery-photos-margin}); // Consider as height value
            }
            // Hide all other images after the 3 first
            &:nth-child(n + 4) {
                display: none;
            }
        }
    }
}